package component

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.Divider
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import content.repository.Menu
import theme.SlackColors
import theme.divider

/**
 * @author zooy
 * @create 2024-01-07 19:36
 * @description
 */
@Composable
fun MenuGroup (
    name: String,
    menuList: List<Menu>,
    selectedMenu: Menu,
    onMenuClick: (Menu) -> Unit
) {

    val itemsExpanded = remember { mutableStateOf(true) }
    val icon = if (itemsExpanded.value) Iconc.caretDown else Iconc.caretRight

    if (name.isNullOrEmpty()) {
        menuList.forEach{
            IconAndTextView(
                modifier = Modifier.clickable { onMenuClick.invoke(it) },
                icon = it.image,
                name = it.name,
                isSelected = it == selectedMenu
            )
        }
    } else {

        // 先绘制Group
        IconAndTextView(modifier = Modifier.fillMaxWidth().clickable { itemsExpanded.value =!itemsExpanded.value }, icon = icon, name = name)

        // 展开时，绘制子菜单
        if (itemsExpanded.value) {
            menuList.forEach{
                IconAndTextView(
                    modifier = Modifier.clickable { onMenuClick.invoke(it) },
                    horizontalPadding = 15.dp,
                    icon = it.image,
                    name = it.name,
                    isSelected = it == selectedMenu
                )
            }
        }
    }

}

@Composable
private fun IconAndTextView(
    modifier: Modifier = Modifier,
    horizontalPadding: Dp = 0.dp,
    icon: String,
    name: String,
    isSelected: Boolean = false
) {
    val color = if (isSelected) Color.White else Color.LightGray
    val backgroundColor = if (isSelected) SlackColors.optionSelected else Color.Transparent

    Row(
        modifier = modifier
            .fillMaxWidth()
            .background(color = backgroundColor)
            .padding(horizontal = horizontalPadding + 15.dp, vertical = 6.dp)
        ,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            painter = painterResource(icon),
            contentDescription = null,
            modifier = Modifier.size(16.dp),
            tint = color
        )
        Spacer(
            modifier = Modifier.width(10.dp)
        )
        Text(
            text = name,
            color = color,
            style = MaterialTheme.typography.body2.copy(
                fontWeight = FontWeight.Normal
            )
        )
    }
}

@Composable
fun TopInfo() {
    Row(modifier = Modifier.height(40.dp).padding(10.dp)) {
        Text(
            "Tom",
            color = Color(95,210,242),
            style = MaterialTheme.typography.body2.copy(
                fontWeight = FontWeight.Bold
            )
        )

        Text(
            "ato",
            color = Color(43,153,252),
            style = MaterialTheme.typography.body2.copy(
                fontWeight = FontWeight.Bold
            )
        )

        Spacer(modifier = Modifier.width(5.dp))

        Text(
            "V1.0",
            color = Color.White,
            style = MaterialTheme.typography.body2.copy(
                fontWeight = FontWeight.ExtraLight
            )
        )
    }
}

@Composable
fun RightTopInfo(
    menu: Menu
) {
    Row(modifier = Modifier.height(40.dp).padding(10.dp)) {
        Text(
            menu.name,
            color = Color(95,210,242),
            style = MaterialTheme.typography.body2.copy(
                fontWeight = FontWeight.Bold
            )
        )
    }
}

/**
 * 左侧功能区
 */
@Composable
fun LeftFun(
    menuList: List<Menu>,
    selectedMenu: Menu,
    onMenuClick: (Menu) -> Unit
) {

    Column(modifier = Modifier.width(250.dp)
        .background(
            color = MaterialTheme.colors.surface,
            shape = RectangleShape
        )
        .border(
            border = BorderStroke(1.dp, color = divider),
            shape = RectangleShape
        )
        .fillMaxHeight()
    ) {
        TopInfo()

        Divider(color = divider)

        Spacer(
            modifier = Modifier.height(10.dp)
        )

        Column {
            // 分组处理
            val menuGroupMap = menuList.groupBy { it.group }

            menuGroupMap.forEach { (k, v) -> MenuGroup(k,v,selectedMenu,onMenuClick) }

        }
    }
}